<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-form ref="form" :inline="true" :model="form" :rules="rules">
                    <el-form-item label="名称" prop="name">
                        <el-input class="w" v-model="form.name"></el-input>
                    </el-form-item>
                    <br />
                    <el-form-item label="描述:">
                        <el-input
                            type="textarea"
                            class="w"
                            placeholder="请输入内容"
                            v-model="form.description"
                            maxlength="120"
                            show-word-limit
                            rows="5"
                        >
                        </el-input>
                    </el-form-item>
                </el-form>
                <el-form :inline="true">
                    <el-form-item>
                        <el-button
                            type="primary"
                            :disabled="
                                checkRequire({
                                    name: form.name
                                })
                            "
                            @click="handleSave"
                            >保存</el-button
                        >
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="handleAdd">添加</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="default" @click="handleRefresh">刷新</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="scroll">
                <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                    <el-table-column width="auto" label="ID" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>

                    <el-table-column width="auto" label="三级标签名称" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.name }}</template>
                    </el-table-column>

                    <el-table-column width="auto" label="标签描述" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.description }}</template>
                    </el-table-column>

                    <el-table-column width="auto" label="下一级标签数量" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.subCount }}</template>
                    </el-table-column>

                    <el-table-column width="auto" label="创建时间" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.createTime }}</template>
                    </el-table-column>

                    <el-table-column width="auto" label="管理" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">
                                <!-- 编辑 -->
                                {{ $t('m.editBtn') }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- <div class="pagination">
                <el-pagination
                    background
                    layout="total,sizes, prev, pager, next, jumper"
                    :page-sizes="[5, 10, 20, 30]"
                    @size-change="handleSizeChange"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div> -->

            <el-dialog title="添加三级标签" :visible.sync="addVisible" width="30%">
                <el-form ref="form" :model="addForm" label-width="70px" :rules="rules">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="addForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input
                            type="textarea"
                            class="w"
                            placeholder="请输入内容"
                            v-model="addForm.description"
                            maxlength="120"
                            show-word-limit
                            rows="5"
                            @keyup.native.enter="saveAdd"
                        >
                        </el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addVisible = false">取 消</el-button>
                    <el-button
                        :disabled="
                            checkRequire({
                                name: addForm.name
                            })
                        "
                        type="primary"
                        @click="saveAdd"
                        >确 定</el-button
                    >
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  export default {
      name: 'EditLevel2Label',
      data() {
          return {
              rules: {
                  name: [{ required: true, message: '请填写名称', trigger: 'blur' }]
              },
              addVisible: false,
              addForm: {
                  name: '',
                  description: ''
              },
              query: {
                  pageIndex: 1,
                  pageSize: 1
              },
              tableData: [],

              pageTotal: 0,
              form: {
                  name: '',
                  description: ''
              }
          };
      },
      // created() {
      //     this.getDataById();
      // },
      computed: {
          ...mapGetters(['tagsList'])
      },
      destroyed() {
          if (!this.tagsList.some((item) => item.name === 'EditLevel2Label')) {
              localStorage.removeItem('label_2_id');
              localStorage.removeItem('label_2_type');
          } else {
              //  什么都不做
          }
      },
      // watch: {
      //     '$route.path'(a, b) {
      //         if (a === '/label/level2/label') {
      //             this.getDataById();
      //         }
      //     }
      // },

      watch: {
          $route: {
              deep: true,
              immediate: true, // 可以省略  created / mounted / activated
              handler(a, b) {
                  // console.log(a, b);
                  if (a.name === 'EditLevel2Label') {
                      this.form = {
                          name: '',
                          description: ''
                      };
                      this.addForm = {
                          name: '',
                          description: ''
                      };
                      this.tableData = [];
                      this.getDataById();
                  }
              }
          }
      },
      methods: {
          checkRequire(obj) {
              return this.$isEmpty(obj);
          },
          async handleSave() {
              try {
                  let url = '/tag/update';
                  let { data: res } = await this.$http[2].get(
                      url,
                      {
                          params: this.$removeField({
                              id: localStorage.getItem('label_2_id'),
                              name: this.form.name,
                              description: this.form.description,
                              type: !this.$isEmpty(localStorage.getItem('label_2_type')) ? localStorage.getItem('label_2_type') : null
                          })
                      },
                      {
                          headers: {
                              'Content-Type': 'multipart/form-data'
                          }
                      }
                  );
                  console.log(res);
                  this.$message.success({
                      message: res.message,
                      duration: 1500
                  });
                  this.addVisible = false;
                  this.form = {
                      name: '',
                      description: ''
                  };
                  this.getDataById();
                  // this.getData();
              } catch (err) {
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          handleAdd() {
              this.addVisible = true;
              this.addForm = {
                  name: '',
                  description: ''
              };
          },
          async saveAdd() {
              try {
                  let url = '/tag/createTag';
                  let { data: res } = await this.$http[2].get(url, {
                      params: this.$removeField({
                          pid: localStorage.getItem('label_2_id'),
                          name: this.addForm.name,
                          description: this.addForm.description,
                          type: !this.$isEmpty(localStorage.getItem('label_2_type')) ? localStorage.getItem('label_2_type') : null
                      })
                  });
                  console.log(res);
                  this.$message.success({
                      message: res.message,
                      duration: 1500
                  });
                  this.addVisible = false;
                  this.addForm = {
                      name: '',
                      description: ''
                  };
                  this.getDataById();
              } catch (err) {
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          async getDataById() {
              try {
                  let url = '/tag/tagdetail';
                  let { data: res } = await this.$http[2].get(url, {
                      params: this.$removeField({
                          id: localStorage.getItem('label_2_id')
                      })
                  });
                  console.log('二级标签', res);
                  this.tableData = [];
                  if (res.data.tblTags && res.data.tblTags.length > 0) {
                      // 中间处理
                      res.data.tblTags.map((item) => {
                          item.createTime = this.$dateFormat(item.createTime, '', '-');
                          // this.tableData.push(...item);
                      });
                      res.data.tblTags = Array.of(res.data.tblTags);
                      for (var i = 0; i < res.data.tblTags.length; i++) {
                          this.tableData.push(...res.data.tblTags[i]);
                      }
                      // 赋值
                      // this.tableData = res.data.tblTags;
                      // this.pageTotal = res.data.totalElements || 0;
                  } else {
                      this.tableData = [];
                      // this.pageTotal = res.data.totalElements || 0;
                  }
                  this.form.name = res.data.name;
                  this.form.description = res.data.description;
              } catch (err) {
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },

          handleRefresh() {
              this.getDataById();
          },
          handleSearch() {
              this.$set(this.query, 'pageIndex', 1);
              this.getDataById();
          },

          handleEdit(index, row) {
              this.$router.replace({
                  path: '/label/level3/label'
                  // query: {
                  //     id: row.id
                  // }
              });
              localStorage.setItem('label_3_id', row.id);
              localStorage.setItem('label_3_type', row.type);
          }

          // 分页导航
          // handlePageChange(val) {
          //     this.$set(this.query, 'pageIndex', val);
          //     this.getDataById();
          // },
          // handleSizeChange(val) {
          //     this.$set(this.query, 'pageSize', val);
          //     this.getDataById();
          // }
      }
  };
</script>

<style scoped>
  .handle-box {
      margin-bottom: 20px;
  }
  .scroll {
      height: 500px;
      overflow: auto;
  }
  .handle-select {
      width: 120px;
  }

  .handle-input {
      /* width: 300px; */
      width: 69px;
      height: 28px;
      display: inline-block;
  }
  .table {
      width: 100%;
      font-size: 14px;
  }
  /* .red {
      color: #ff0000;
  } */
  .mr10 {
      margin-right: 10px;
  }
  .table-td-thumb {
      display: block;
      margin: auto;
      width: 40px;
      height: 40px;
  }
</style>
